<template>
	<view>
		<view class="example">
			<uni-forms ref="form" :modelValue="establishFrom" :rules="rules">
				<uni-forms-item :label="Avatar" name="header" required>
					<u-avatar :src="establishFrom.header" @click=" headerImage"></u-avatar>
				</uni-forms-item>
				<uni-forms-item :label="Name" name="name" required>
					<uni-easyinput maxlength="10" v-model="establishFrom.name" placeholder="请输入姓名" />
				</uni-forms-item>

				<uni-forms-item :label="Phone" name="phone" required>
					<uni-easyinput type="text" maxlength="11" v-model="establishFrom.phone" placeholder="请输入手机号"
						:rules="rules.phone" />
				</uni-forms-item>
				<uni-forms-item :label="Email" name="email" required>
					<uni-easyinput v-model="establishFrom.email" placeholder="请输入邮箱" />
				</uni-forms-item>

				<uni-forms-item :label="Gender" name="gender" required>
					<uni-data-checkbox v-model="establishFrom.gender" :localdata="sexList" />
				</uni-forms-item>
				<uni-forms-item :label="Relevancy" name="sale_id" required>
					<uni-data-select placeholder="请选择销售" v-model="establishFrom.sale_id" :localdata="relevancyList"
						:clear="false"></uni-data-select>

				</uni-forms-item>
				<uni-forms-item :label="Risk" name="risk_level_id" required>
					<uni-data-select placeholder="请选择等级" v-model="establishFrom.risk_level_id" :localdata="gradeList"
						:clear="false"></uni-data-select>

				</uni-forms-item>
				<uni-forms-item :label="LoginPwd" name="pwd" required>
					<uni-easyinput v-model="establishFrom.pwd" placeholder="请输入密码" />

				</uni-forms-item>
				<uni-forms-item :label="State" name="status" required>
					<uni-data-checkbox v-model="establishFrom.status" :localdata="statusList" />
				</uni-forms-item>


			</uni-forms>
		</view>
		<button type="primary" class="operation" @click="submit" v-if="isSubmit">{{ $t('common.Submit') }}</button>
	</view>
</template>

<script>
	import {
		accountlist,
		levelist,
		addMember,
		getMemberDetails
	} from '@/api/client.js'
	import {
		uploadImage
	} from '@/common/config/uploadFile.js'
	export default {
		data() {
			return {
				establishFrom: {
					name: "", //会员名称
					phone: "", //会员手机号
					email: "", //会员邮箱
					header: "", //头像
					gender: null, //性别1 男2 女
					is_sale: 0, //是否销售账号
					sale_id: null, //关联销售id
					risk_level_id: null, //风控等级id
					pwd: "", //登录密码
					status: 1 //会员状态 1 开启 0 禁用
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction(rule, value, data, callback) {
								let iphoneReg = new RegExp('^1[0-9]{10}$');
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱',
						}, {
							validateFunction(rule, value, data, callback) {
								let iphoneReg = new RegExp('^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,6}$');
								if (!iphoneReg.test(value)) {
									callback('邮箱格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					header: {
						rules: [{
							required: true,
							errorMessage: '请添加头像',
						}]
					},
					gender: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					sale_id: {
						rules: [{
							required: true,
							errorMessage: '请选择销售',
						}]
					},
					risk_level_id: {
						rules: [{
							required: true,
							errorMessage: '请选择等级',
						}]
					},
					pwd: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
				},
				sexList: [{
					text:this.$t('common.Man'),
					value: 1
				}, {
					text: this.$t('common.Woman'),
					value: 2
				}],
				statusList: [{
					text: this.$t('clientele.Open'),
					value: 1
				}, {
					text: this.$t('clientele.Disable'),
					value: 0
				}],
				relevancyList: [], //关联销售列表
				gradeList: [], //风控等级列表

				conduction: {}, //传值接收的对象
				isSubmit: true //是否显示提交按钮
			};
		},

		onShow() {
			this.gatherList()
		},
		onLoad(item) {
			this.conduction = item
			this.getDetails()
		},
		methods: {
			gatherList() {
				// 关联销售列表
				accountlist().then(res => {
					if (res.data.length) {
						res.data = res.data.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id
							}
						})
					}
					this.relevancyList = res.data
				})
				// 风控等级列表
				levelist().then(res => {
					console.log(res, '5545445');
					if (res.length) {
						res = res.map(code => {
							return {
								...code,
								text: code.name,
								value: code.id
							}
						})
					}
					this.gradeList = res
				})
			},
			headerImage() {
				uploadImage(1, res => {
					this.establishFrom.header = ''
					this.establishFrom.header = res.data[0].intact_path
				})
			},
			submit() {
				this.$refs.form.validate().then(res => {
					addMember(this.establishFrom).then(res => {
						this.establishFrom = {}
						uni.navigateBack({
							delta: 1
						})
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getDetails() {
				if (this.conduction.id) {
					this.isSubmit = false
					uni.setNavigationBarTitle({
						title: this.$t('clientele.ModifyTheCustomer')
					})
					getMemberDetails(this.conduction.id).then(res => {
						this.establishFrom.name = res.name
						this.establishFrom.phone = res.phone
						this.establishFrom.email = res.email
						this.establishFrom.header = res.header
						this.establishFrom.gender = Number(res.gender)
						this.establishFrom.sale_id = Number(res.sale_id)
						this.establishFrom.risk_level_id = Number(res.risk_level_id)
						this.establishFrom.pwd = res.pwd
						this.establishFrom.status = Number(res.status)

						console.log(res, '获取会员详情');
					})

				} else {
					this.isSubmit = true
					uni.setNavigationBarTitle({
						title: this.$t('clientele.CreateAnAccount')
					})

				}

			}
		},
		computed: {
			Avatar(){
				return this.$t('clientele.Avatar')
			},
			Name(){
				return this.$t('common.Name')
			},
			Phone(){
				return this.$t('clientele.Phone')
			},
			Email(){
				return this.$t('clientele.Email')
			},
			Gender(){
				return this.$t('clientele.Gender')
			},
			Relevancy(){
				return this.$t('clientele.Relevancy')
			},
			Risk(){
				return this.$t('clientele.Risk')
			},
			LoginPwd(){
				return this.$t('clientele.LoginPwd')
			},
			State(){
				return this.$t('clientele.State')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		background-color: #fff;
	}



	.operation {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 10%;
		width: 500rpx;
	}
</style>